<template>
  <div class="specs_wrap">
    <BreadCrumb crumb="商品规格管理"></BreadCrumb>  

    <div class="top_bar">
       <AddSpecs @fnResetTable="fnGetData(1)"></AddSpecs>       
    </div>
    <SpecsTable :specs="aSpecsList" @fnResetTable="fnGetData(1)"></SpecsTable>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      :current-page="page"
      style="text-align:center;margin-top:10px"
      @current-change="fnGetPage"
      >
    </el-pagination>
  </div>
</template>

<script>
import BreadCrumb from '@/components/widget/BreadCrumb'
import AddSpecs from '@/components/widget/AddSpecs'
import SpecsTable from '@/components/widget/SpecsTable'
import cons from '@/components/constant'

export default {
  name: 'Specs',
  data () {
    return {
      page:1,
      total:0,
      pagesize:3,
      aSpecsList:[]
    }
  },
  components:{
    BreadCrumb,
    AddSpecs,
    SpecsTable
  },
  mounted(){
    this.fnGetData(1);
  },
  methods:{
    // 加载所有规格的数据
    fnGetData(){
      this.axios
      .get(cons.apis + '/v1/goods/specs/',{
        params:{
          page:this.num,
          pageSize:this.pagesize
        },
        headers:{
          Authorization: 'JWT ' + localStorage.token,
        },
        responseType:'json'
      })
      .then((res) => {
        console.log('加载规格的数据',res)
        this.aSpecsList = res.data
      }).catch((err) => {
        console.log('加载错误',err)
      });
    }
  }
}
</script>

<style scoped>
.top_bar{
    width:95.2%;
    overflow:hidden;
    margin:10px auto;
  }
</style>
